<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/echarts/build/dist/echarts.js" type="text/javascript"></script>
		<script src="../js/echarts/jquery-1.11.1.min.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="main" style="width:1000px;height:600px;"></div>
		<script>
			require.config({
				paths : {
					echarts : '../js/echarts/build/dist'
				}
			});
			require([
			'echarts', // 代指echarts设置的路径，即'../resource/build/dist'
			'echarts/chart/main', // 使用柱状图就加载bar模块，按需加载,引入bar.js
			'echarts/chart/map',// 加载地图,引入funnel.js文件, 按需加载,		
			], function(ec,theme) {
			// 自定义扩展图表类型：mapType = HK
			require('echarts/util/mapData/params').params.WH = {
			getGeoJson : function(callback) {
				$.getJSON('../json/WH_geo.json', callback);
			}
		}
		var myChart = ec.init(document.getElementById('main'),theme);
		option = {
			 backgroundColor: '#001771',
			  toolbox: {
        show : true,
        orient : 'vertical',
        x: 'right',
        y: 'center',
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
			series : [ {
				type : 'map',
				selectedMode : 'single',
				mapType : 'WH', // 自定义扩展图表类型
				roam: true,
            	hoverable: false,
				itemStyle: {
	                normal: {
	                    borderColor:'rgba(100,149,237,0.6)',
	                    borderWidth:0.5,
	                    areaStyle: {
	                        color: '#001771'
	                    }
	                }
            	},
				data : [

				],
				// 自定义名称映射
				nameMap : {
					
				},
				// 文本位置修正
				textFixed : {
					'鸠江区' : [ -10, -20 ],
					'弋江区' : [ 10, 20 ]
				}
			} ]
		};
		myChart.setOption(option);

		var ecConfig = require('echarts/config');
		
		function eConsole(param) {
			var name = param.name;
			if (param.type == 'hover') {
				$("#main").css("cursor","pointer");			
			}
			
		}
		myChart.on(ecConfig.EVENT.CLICK, eConsole);
		myChart.on(ecConfig.EVENT.DBLCLICK, eConsole);
		myChart.on(ecConfig.EVENT.HOVER, eConsole);
		myChart.on(ecConfig.EVENT.DATA_ZOOM, eConsole);
		myChart.on(ecConfig.EVENT.LEGEND_SELECTED, eConsole);
		myChart.on(ecConfig.EVENT.MAGIC_TYPE_CHANGED, eConsole);
		myChart.on(ecConfig.EVENT.DATA_VIEW_CHANGED, eConsole);
		})
		</script>
	</body>
</html>
